<css href="__PUBLIC__/plugs/uploadify/uploadify.css"/>
<js href="__PUBLIC__/plugs/uploadify/jquery.uploadify.js"/>


<div style="margin:20px;color:red;">
	<p>
		1.上传产品图片相册时注意，分两种情况上传，电脑端使用的，手机端使用的，同时分类上传，有关于产品和产品参数的
	</p>
	<p>
		2.图片描述的时候，电脑端的，使用前缀pc_,移动端的使用mob_,类型使用，canshu(参数),例如电脑端参数,pc_canshu
	</p>
	<p>
		3.移动端图片的大小要求: 500 * 333 px
	</p>
</div>

<table width="100%">
	<tr>
		<td width="50%">
			<form>
				<div id="queue"></div>
				<input id="file_upload" name="img_gallery" type="file" multiple="true">
				<input id="url" type="hidden" value="__PUBLIC__/upload/images/">
			</form>
		</td>
		<td>
			<table id="img_panel" width="100%">				
				<tr>
					<td align="left">图片id</td>
					<td align="left">图片简介</td>
					<td align="left">操作</td>
				</tr>
				<volist name="img_list" id="img">
					<tr id="tr_{$img.img_id}">
						<td>
							<img src="__UPLOAD__/images/{$img.img_url}" style="width: 60px; height: 60px;">
							<input type="hidden" name="img_id[]" value="{$img.img_id}">
						</td>
						<td>
							<input name="img_desc[]" style="width: 120px; height: 20px;" value="{$img.img_desc}">
						</td>
						<td>
							<span onclick="delete_gallery_img({$img.img_id})" style="color: red; cursor: pointer;">
								删除
							</span>
						</td>
					</tr>
				</volist>
			</table>
		</td>
	</tr>
</table>

<style>
#dialog .qs-close-button {background:#fff;position:absolute;cursor:pointer;border-radius:30px; background:#000;color:#fff;text-align:center; font-size:16px; line-height:25px;height:25px; right:-15px; top:-15px; z-index:100000;width:25px;}
</style>

<div id="dialog" title="Basic dialog" class="hide">
	<span id="fsfafsdfa" class="ui-button-text qs-close-button dp" style="" >X</span>
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script type="text/javascript">
<!--
/**
 * Qdialog 
 * author	liuricheng
 * time		201-09-26
 * 
 */
 
(function($){  
	$.fn.Qdialog	= function(options){
		/* dialog */
		var mDialog		=	$(this);
		var defaults 	=	{
			autoOpen:false,
			modal:true
		}
		
		var options		=	$.extend(defaults,options);		
		mDialog.dialog(options);		
		$('#fsfafsdfa').bind('click',function(){
			mDialog.dialog('close');
		}); 
		return mDialog;
	}
})(jQuery);
/*
$('#dialog').Qdialog({height:400,width:600});
$( "#dialog" ).dialog({title:'fsfasfas',modal:true,autoOpen:true});
*/
-->


	$('#file_upload').uploadify({
		swf      : '__PUBLIC__/plugs/uploadify/uploadify.swf',
		uploader : '__URL__/add_goods_gallery',
		onUploadStart:function(file){
			$('#loading').QLoading({text:'上传中...'});	
		},
		onUploadSuccess:function(file, data, response){
			var url	=	document.getElementById('url').value;
			data 	= 	jQuery.parseJSON(data); 
			if(data.status == "1"){
				showImg(url + data.thumb_url,data.id);
				$('#loading').QLoading({text:'上传成功',img:'happy',status:'close',time:0.5});	
			}else{
				$('#loading').QLoading({text:'上传失败',img:'sad',status:'close',time:1.5});	
			}
		}
	});
	// 显示图片
	function showImg(url,id){
		var img_table 	= 	document.getElementById('img_panel');
		var tr			=	document.createElement('tr');
		var td1			=	document.createElement('td');
		var td2			=	document.createElement('td');
		var td3			=	document.createElement('td');
		var img			=	document.createElement('img');
		var input		=	document.createElement('input');
		var input2		=	document.createElement('input');
		var span		=	document.createElement('span');
		
		// img
		img.style.width = '60px';
		img.style.height= '60px';
		img.setAttribute('src',url);
		// input
		input.style.width	=	"120px";
		input.style.height	=	"20px";
		input.setAttribute('name','img_desc[]');
		// input2
		input2.setAttribute('type','hidden');
		input2.setAttribute('name','img_id[]');
		input2.setAttribute('value',id);
		// span
		span.innerHTML		=	'删除';
		span.style.color	=	'red';
		span.style.cursor	=	'pointer';
		span.setAttribute('onclick','delete_gallery_img(' + id + ')');
		td1.appendChild(img);
		td1.appendChild(input2); // img_id
		td2.appendChild(input);	// img_desc
		td3.appendChild(span);
		
		tr.setAttribute('id','tr_' + id);
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		img_table.appendChild(tr);
	}		
	function delete_gallery_img(id){
		$.ajax({
			url:'__URL__/del_goods_gallery',
			dataType:'json',
			type:'post',
			data:{img_id:id},
			beforeSend:function(){
				$('#loading').QLoading({status:'open',text:''});
			},
			success:function(msg){
				if(msg.data == 1){
					$('#tr_' + id).remove();
					$('#loading').QLoading({img:'happy',status:'close',time:0.5});
				}else{
					$('#loading').QLoading({img:'happy',status:'close',time:0.5});
				}
			}
		});
	}
</script>








